import { useDark, useToggle } from '@vueuse/core'
import useMainStore from '@/stores/main/main'
const isDark = useDark({
  onChanged(dark: boolean) {
    useMainStore().layoutConfig.isDark = dark
    updateHtmlDarkClass(dark)
  }
})

function updateHtmlDarkClass(val: boolean) {
  const htmlEl = document.getElementsByTagName('html')[0]
  if (val) {
    htmlEl.setAttribute('class', 'dark')
  } else {
    htmlEl.setAttribute('class', '')
  }
}

/**
 * 切换暗黑模式
 */
const toggleDark = useToggle(isDark)

export function useToggleDark() {
  return [toggleDark]
}
